<template>
	<div class="admin-mp-view" :style="`height: ${documentHeight}px;`" v-if="viewModel">
		<Left :viewModel="viewModel.links" @leftChang="leftChang"></Left>
		<div class="mp-view_conter">
			<div class="view_conter-bx">
				<div class="view_conter-head">
					<div class="conter-head_t">
						<div class="conter-head_t-icon"></div>
						<div class="conter-head_t-p">{{mpTile}}</div>
					</div>
				</div>
				<div class="view_conter-iframe">
					<iframe :src="alaUrl" width="320px" height="512px"></iframe>
				</div>
			</div>
		</div>
		<Right :viewModel="viewModel"></Right>
	</div>
</template>
<script>
	import ala from '@/service/ala.js'
	import api from '@/service/api.js'
	import Left from './widget/left.vue'
	import Right from './widget/right.vue'
	export default {
		components: {
			Left,
			Right
		},
		data() {
			return {
				documentHeight: 0,
				alaUrl: null,
				viewModel: null,
				mpTile: null
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				var h = document.documentElement.clientHeight || document.body.clientHeight
				this.documentHeight = h - 74
				var repones = await api.appSingle(ala.urlId())
				this.viewModel = repones
				var mpUrl = this.viewModel.links[0].url
				if (ala.isBuild() === false) {
					this.alaUrl = 'http://localhost:1000/#/' + mpUrl
				} else {
					this.alaUrl = ala.host + 'core/index.html#/' + mpUrl
				}
				this.alaUrl = this.alaUrl.replace('#//', '#/')
				this.mpTile = this.viewModel.links[0].name
			},
			leftChang(val) {
				this.alaUrl = ala.host + val.url
				this.mpTile = val.name
			}
		}
	}
</script>
<style lang="scss">
	@import "./var.scss";
</style>